<template>
  <el-card>
    <div slot="header">
      <h3>开发计划详情-查看</h3>
    </div>
    <div class="page-body">
      <basic-form
        showColon
        defaultExpandStatus
        formItemWidth="130px"
        :showBtnBar="false"
        :formColumns="formItems"
        :dataSource="formData"
      >
        <FormPopover
          slot="category"
          :content="formData.categoryPath"
          :popover-list="formData.categoryPathSet"
        />
      </basic-form>
      <el-divider content-position="left">开发需求明细</el-divider>
      <el-row>
        <SkusTable
          :maxTableHeight="480"
          :defaultMinWidth="100"
          :dataSource="TableInfo.list"
          :columns="TableInfo.columns"
        />
      </el-row>
      <FooterFields :fieldsItems="fieldsItems" :fieldsData="fieldsData" />
    </div>
    <ViewProductDetailsDialog
      :visible.sync="viewProductDetails.visible"
      :req-detail-no="viewProductDetails.reqDetailNo"
    />
  </el-card>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import FormPopover from '../components/DevelopPlanForm/FormPopover';
import FooterFields from '@/pages/commodity/components/FooterFields/DataRender';
import ViewProductDetailsDialog from '../components/ViewProductDetailsDialog';
import { VIEW_TABLE_COLUMNS, FIELDS_ITEMS, getSkuCountCol } from '../developPlan/constants/actionPage';
import { INCOMPLETE_FORM_ITEMS } from './constants/view';
import { RECORD_STATUS_VALUES } from './constants';
import { TableInfo } from '@/utils/getUtils';
import { getDevPlanInfoService } from '@/api/commodity/developmentRequirementPlan/developPlan';
export default {
  components: {
    BasicForm,
    SkusTable,
    FormPopover,
    FooterFields,
    ViewProductDetailsDialog
  },
  data () {
    return {
      formItems: INCOMPLETE_FORM_ITEMS,
      formData: {},
      TableInfo: new TableInfo({ columns: VIEW_TABLE_COLUMNS }),
      fieldsItems: FIELDS_ITEMS,
      fieldsData: {},
      viewProductDetails: {
        visible: false,
        reqDetailNo: ''
      }
    }
  },
  mounted () {
    this.TableInfo.setColumns([
      ...VIEW_TABLE_COLUMNS,
      getSkuCountCol(this.handleViewDetails)
    ])
    this.loadDevPlanInfo()
  },
  methods: {
    // 加载开发详情
    async loadDevPlanInfo () {
      const data = { planNo: this.$route?.query?.planNo }
      const res = await getDevPlanInfoService(data, '.page-body')
      if (!res?.retData) return
      this.TableInfo.setList(res.retData.detailVoList)
      this.fieldsData = res.retData
      this.formData = res.retData
      if (res.retData?.status == RECORD_STATUS_VALUES.Canceled) { // 单据类型为已取消时，展示取消原因字段
        this.fieldsItems = [...FIELDS_ITEMS, { label: '取消原因', prop: 'cancelReason' }]
      }
    },
    // 查看商品详情
    handleViewDetails (row) {
      this.viewProductDetails.visible = true
      this.viewProductDetails.reqDetailNo = row.reqDetailNo
    }
  }
}
</script>
<style lang="less" scoped>
.category-path-content {
  width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-path-list {
  height: 200px;
  overflow: hidden;
  overflow-y: auto;
  li {
    padding: 5px 0;
    border-bottom: 1px dashed #ccc;
  }
}
</style>
